<template>
  <div class="listCens">
    <div class="panel_timeLine">
      <!-- 原有“预警事件”模块 -->
      <div class="panel-group">
        <div class="panel-left-box">
          <div class="box-icon-border">
            <div class="box-icon">
              <i class="el-icon-bell"></i>
            </div>
          </div>
          <div class="box-line start-line"></div>
        </div>
        <div class="panel-section">
          <div class="section-title">
            <span>预警事件</span>
          </div>
          <div class="section-content">
            <el-button
              type="primary"
              class="full-width"
              plain
              @click="typeSelect('EmergencyEvent')"
              >应急事件</el-button
            >
          </div>
        </div>
      </div>

      <!-- 原有“接警处置”模块 -->
      <div class="panel-group">
        <div class="panel-left-box">
          <div class="box-icon-border">
            <div class="box-icon">
              <i class="el-icon-bell"></i>
            </div>
          </div>
          <div class="box-line"></div>
        </div>
        <div class="panel-section">
          <div class="section-title">
            <span>接警处置</span>
          </div>
          <div class="section-content">
            <el-button
              type="primary"
              class="full-width"
              plain
              @click="typeSelect('xczb')"
              >现场甄别</el-button
            >
            <el-button
              type="primary"
              class="full-width"
              style="margin-left: 0px"
              plain
              @click="typeSelect('whpck')"
              >危化品查看</el-button
            >
          </div>
        </div>
      </div>

      <!-- 原有“初步报告”模块 -->
      <div class="panel-group">
        <div class="panel-left-box">
          <div class="box-icon-border">
            <div class="box-icon">
              <i class="el-icon-bell"></i>
            </div>
          </div>
          <div class="box-line"></div>
        </div>
        <div class="panel-section">
          <div class="section-title">
            <span>初步报告</span>
          </div>
          <div class="section-content">
            <el-button
              type="primary"
              class="full-width"
              plain
              @click="typeSelect('bgjg')"
              >报告结果</el-button
            >
          </div>
        </div>
      </div>

      <!-- 原有“预案启动”模块 -->
      <div class="panel-group">
        <div class="panel-left-box">
          <div class="box-icon-border">
            <div class="box-icon">
              <i class="el-icon-bell"></i>
            </div>
          </div>
          <div class="box-line"></div>
        </div>
        <div class="panel-section">
          <div class="section-title">
            <span>预案启动</span>
          </div>
          <div class="section-content">
            <el-button
              type="primary"
              class="full-width"
              plain
              @click="typeSelect('yaqd')"
              >启动</el-button
            >
            <el-button
              type="primary"
              class="full-width"
              style="margin-left: 0px"
              plain
              @click="typeSelect('yacx')"
              >预案查询</el-button
            >
          </div>
        </div>
      </div>
      <!-- 新增“指挥调度”模块 -->
      <div class="panel-group">
        <div class="panel-left-box">
          <div class="box-icon-border">
            <div class="box-icon">
              <i class="el-icon-bell"></i>
            </div>
          </div>
          <div class="box-line"></div>
        </div>
        <div class="panel-section">
          <div class="section-title">
            <span>指挥调度</span>
          </div>
          <div class="section-content">
            <el-button
              type="primary"
              class="full-width"
              plain
              @click="typeSelect('rydd')"
              >人员调度</el-button
            >
            <el-button
              type="primary"
              class="full-width"
              style="margin-left: 0px"
              plain
              @click="typeSelect('wzdd')"
              >物资调度</el-button
            >
            <el-button
              type="primary"
              class="full-width"
              plain
              @click="typeSelect('cldd')"
              >车辆调度</el-button
            >
            <el-button
              type="primary"
              class="full-width"
              style="margin-left: 0px"
              plain
              @click="typeSelect('wzqy')"
              >物资企业</el-button
            >
          </div>
        </div>
      </div>

      <!-- 新增“现场监测”模块 -->
      <div class="panel-group">
        <div class="panel-left-box">
          <div class="box-icon-border">
            <div class="box-icon">
              <i class="el-icon-bell"></i>
            </div>
          </div>
          <div class="box-line"></div>
        </div>
        <div class="panel-section">
          <div class="section-title">
            <span>现场监测</span>
          </div>
          <div class="section-content">
            <el-button
              type="primary"
              class="full-width"
              plain
              @click="typeSelect('jcbd')"
              >监测布点</el-button
            >
            <el-button
              type="primary"
              class="full-width"
              style="margin-left: 0px"
              plain
              @click="typeSelect('qxjc')"
              >气象监测</el-button
            >
            <el-button
              type="primary"
              class="full-width"
              plain
              @click="typeSelect('sjsc')"
              >数据上传</el-button
            >
            <el-button
              type="primary"
              class="full-width"
              style="margin-left: 0px"
              plain
              @click="typeSelect('DataAnalysis')"
              >数据分析</el-button
            >
          </div>
        </div>
      </div>

      <!-- 新增“事件报告”模块 -->
      <div class="panel-group">
        <div class="panel-left-box">
          <div class="box-icon-border">
            <div class="box-icon">
              <i class="el-icon-bell"></i>
            </div>
          </div>
          <div class="box-line"></div>
        </div>
        <div class="panel-section">
          <div class="section-title">
            <span>事件报告</span>
          </div>
          <div class="section-content">
            <el-button
              type="primary"
              class="full-width"
              plain
              @click="typeSelect('sjdjpg')"
              >事件等级评估</el-button
            >
            <el-button
              type="primary"
              class="full-width"
              style="margin-left: 0px"
              plain
              @click="typeSelect('InitialTemplate')"
              >初期模板</el-button
            >
            <el-button
              type="primary"
              class="full-width"
              plain
              @click="typeSelect('ContinuationTemplate')"
              >续报模板</el-button
            >
            <el-button
              type="primary"
              class="full-width"
              style="margin-left: 0px"
              plain
              @click="typeSelect('FinalTemplate')"
              >终报模板</el-button
            >
            <el-button
              type="primary"
              class="full-width"
              plain
              @click="typeSelect('ReportList')"
              >报告列表</el-button
            >
          </div>
        </div>
      </div>

      <!-- 新增“事件终止”模块 -->
      <div class="panel-group">
        <div class="panel-left-box">
          <div class="box-icon-border">
            <div class="box-icon">
              <i class="el-icon-bell"></i>
            </div>
          </div>
          <div class="box-line end-line"></div>
        </div>
        <div class="panel-section">
          <div class="section-title">
            <span>事件终止</span>
          </div>
          <div class="section-content">
            <el-button
              type="primary"
              class="full-width"
              plain
              @click="typeSelect('sjzz')"
              >事件终止</el-button
            >
            <el-button
              type="primary"
              class="full-width"
              style="margin-left: 0px"
              plain
              @click="typeSelect('LossDamageUpload')"
              >事后损失上传</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DevelopDemo",
  data() {
    return {
      selectedEvent: "",
      eventList: [],
      selectedEventData: null,
    };
  },
  created() {
    console.log("DevelopDemo页面已加载");
    this.emergencyReleaseList();
  },
  methods: {
    typeSelect(id) {
      console.log("点击了：", id);
      this.$emit("showDiog", id);
    },
    emergencyReleaseList() {
      // 若有实际接口需求，可在此补充请求逻辑
    },
  },
};
</script>

<style scoped>
div {
  font-family: SourceHanSansCN-Regular !important;
}

.listCens {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
}

/* 顶部导航栏样式 */
.top-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  padding: 0 10px;
}

.close-btn {
  color: #909399 !important;
}

.panel_timeLine {
  position: absolute;
  right: 1px;
  top: 0;
  width: 100%;
  height: 100%;
  color: #000;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
  /* border: 1px solid rgba(45, 129, 255, 1);
  border-left: 2px solid rgba(45, 129, 255, 1); */
}

.panel-group {
  display: flex;
  margin-bottom: 0;
}

.panel-left-box {
  width: 40px;
  min-width: 40px;
  height: 100%;
  position: relative;
}

.box-icon-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background-color: rgba(48, 126, 255, 0.3);
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 2;
  overflow: hidden;
}

.box-icon {
  margin: 4px;
  width: 32px;
  height: 32px;
  background: linear-gradient(
    45deg,
    rgba(40, 120, 254, 1),
    rgba(87, 149, 255, 1)
  );
  border-radius: 50%;
}

.box-icon i {
  margin: 8px;
  font-size: 16px;
  color: white;
}

.box-line {
  position: absolute;
  top: 0;
  left: 20px;
  width: 1px;
  height: 100%;
  background-color: rgba(48, 126, 255, 1);
  z-index: 1;
}

.start-line {
  top: 20px;
}

.end-line {
  height: 30px;
}

.panel-section {
  margin-bottom: 15px;
  padding-top: 10px;
  flex: 1;
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 15px;
  padding-left: 10px;
}

.section-content {
  padding-left: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.full-width {
  display: block;
  width: 160px;
  margin-left: 0;
  height: 40px;
  letter-spacing: 1.05px;
}

.el-button--primary.is-plain {
  color: #000 !important;
  background: rgba(0, 0, 0, 0) !important;
  border: 1px solid rgba(48, 126, 255, 1) !important;
  font-family: SourceHanSansCN-Regular !important;
  margin-top: 10px;
}

.el-button--primary.is-plain:hover,
.el-button--primary.is-plain:focus {
  color: #ffffff !important;
  background: rgba(48, 126, 255, 1) !important;
  border: 1px solid rgba(48, 126, 255, 1) !important;
  font-family: SourceHanSansCN-Regular !important;
}
</style>

<style>
.el-select-dropdown.el-popper {
  border: 1px solid rgba(48, 126, 255, 1) !important;
  background-color: rgba(48, 126, 255, 0.8) !important;
}

.el-select-dropdown__item {
  color: white !important;
}

.el-select-dropdown__item.selected {
  color: white !important;
  border-color: rgba(48, 126, 255, 1) !important;
  background-color: rgba(48, 126, 255, 1) !important;
}

.el-select-dropdown__item.hover {
  color: white !important;
  border-color: rgba(48, 126, 255, 1) !important;
  background-color: rgba(48, 126, 255, 0.5) !important;
}

.el-select-dropdown__item.selected.hover {
  color: white !important;
  border-color: rgba(48, 126, 255, 1) !important;
  background-color: rgba(48, 126, 255, 1) !important;
}

.el-popper[x-placement^="bottom"] .popper__arrow::after {
  top: 0px;
  border-bottom-color: rgba(48, 126, 255, 1) !important;
}
</style>
